import type { MaProTableColumns, MaProTableExpose } from "@mineadmin/pro-table";
import type { UseDialogExpose } from "@/hooks/useDialog.ts";
import { ElTag, ElButton } from "element-plus";
import { useMessage } from "@/hooks/useMessage.ts";
import { ResultCode } from "@/utils/ResultCode.ts";
import hasAuth from "@/utils/permission/hasAuth.ts";
import { deleteByIds } from "@/plugins/ai-warning/device/api/rdDeviceSerial.ts";
import { h } from "vue";
import AudioPlayer from "@/plugins/ai-warning/file/views/rdFileVoice/components/AudioPlayer.vue";

export default function getTableColumns(
  dialog: UseDialogExpose,
  formRef: any,
  t: any
): MaProTableColumns[] {
  const msg = useMessage();

  return [
    {
      type: "selection",
      showOverflowTooltip: false,
      label: () => t("crud.selection"),
    },
    { 
      label: "录像机名称", 
      prop: "name",
      showOverflowTooltip: true,
      width:120,
    },
    { 
      label: "录像机地址", 
      prop: "addr",
      showOverflowTooltip: true,
      width:120,
    },
    { 
      label: "装置名称", 
      prop: "rod.name",
      showOverflowTooltip: true,
      width:100,
    },
    {
      label: "在线状态",
      prop: "online",
      cellRender: ({ row }) => {
        const statusMap = {
          1: { text: "在线", type: "success" },
          2: { text: "离线", type: "danger" },
        };
        const status = statusMap[row.online] || {
          text: "未知",
          type: "info",
        };
        return h(ElTag, { type: status.type }, () => status.text);
      },
    },
    { 
      label: "名称语音", 
      prop: "voice",
      width: 120,
      cellRender: ({ row }) => {
        if (!row.voice || !row.voice.file) {
          return h('span', { style: { color: '#999' } }, '无');
        }
        return h('div', { 
          style: { 
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center', 
            width: '100%' 
          } 
        }, [
          h(AudioPlayer, {
            audioUrl: row.voice.file,
            fileName: row.voice.file.split("/").pop() || "名称语音"
          })
        ]);
      }
    },
    { 
      label: "遵守语音", 
      prop: "comply",
      width: 120,
      cellRender: ({ row }) => {
        if (!row.comply || !row.comply.file) {
          return h('span', { style: { color: '#999' } }, '无');
        }
        return h('div', { 
          style: { 
            display: 'flex', 
            justifyContent: 'center', 
            alignItems: 'center', 
            width: '100%' 
          } 
        }, [
          h(AudioPlayer, {
            audioUrl: row.comply.file,
            fileName: row.comply.file.split("/").pop() || "遵守语音"
          })
        ]);
      }
    },
    { 
      label: "视频流地址", 
      width: 300,
      prop: "url",
      render: ({ row }) => {
        if (!row.url || !Array.isArray(row.url) || row.url.length === 0) {
          return h('span', { style: { color: '#999' } }, '无');
        }
        const validUrls = row.url.filter((url: string) => url && url.trim());
        if (validUrls.length === 0) {
          return h('span', { style: { color: '#999' } }, '无');
        }
        return h('div', { 
          style: { 
            fontSize: '12px',
            color: '#666',
            lineHeight: '1.5',
            whiteSpace: 'pre-line'
          } 
        }, validUrls.join('\n'));
      }
    },
    { 
      label: "通道号", 
      prop: "channel_no",
      showOverflowTooltip: true,
      width:100,
    },
    { 
      label: "序列号", 
      prop: "device_serial",
      showOverflowTooltip: true,
      width:100,
    },
    {
      label: "摄像头类型",
      prop: "type",
      cellRender: ({ row }) => {
        const statusMap = {
          1: { text: "枪机", type: "success" },
          2: { text: "球机", type: "warning" },
        };
        const status = statusMap[row.type] || {
          text: "未知",
          type: "info",
        };
        return h(ElTag, { type: status.type }, () => status.text);
      },
    },
    { 
      label: "排序", 
      prop: "sort",
    },
    { 
      label: "备注", 
      prop: "remarks",
      width:120,
      showOverflowTooltip: true,
    },
    {
      type: "operation",
      label: () => t("crud.operation"),
      fixed: "right",
      width:100,
      operationConfigure: {
        actions: [
          {
            name: "edit",
            icon: "material-symbols:person-edit",
            show: ({ row }) => hasAuth("device:rdDeviceSerial:update"),
            text: () => t("crud.edit"),
            onClick: ({ row }) => {
              dialog.setTitle(t("crud.edit"));
              dialog.open({ formType: "edit", data: row });
            },
          },
          {
            name: "del",
            icon: "mdi:delete",
            text: () => t("crud.delete"),
            show: ({ row }) => hasAuth("device:rdDeviceSerial:delete"),
            onClick: ({ row }, proxy: MaProTableExpose) => {
              msg.delConfirm(t("crud.delDataMessage")).then(async () => {
                const response = await deleteByIds([row.id]);
                if (response.code === ResultCode.SUCCESS) {
                  msg.success(t("crud.delSuccess"));
                  proxy.refresh();
                }
              });
            },
          },
        ],
      },
    },
  ];
}
